<template>
  <div class="map-container" ref="mapRef"></div>
  <!-- 新增统计面板 -->
  <div class="new-stats-container">
    <div class="stat-item" @click="clearTimeFilter">
      <span class="stat-label">场所总计</span>
      <span class="stat-value">{{ venues.length }}</span>
    </div>
    <div class="stat-item" @click="filterByMonth">
      <span class="stat-label">本月新增</span>
      <span class="stat-value">{{ monthlyNewCount }}</span>
    </div>
    <div class="stat-item" @click="filterByWeek">
      <span class="stat-label">本周新增</span>
      <span class="stat-value">{{ weeklyNewCount }}</span>
    </div>
  </div>
  <!-- 场所统计面板 - 轮播图样式 -->
  <div class="statistics-container">
    <div class="carousel-container">
      <button class="carousel-btn prev-btn" @click="scrollCarousel(-1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15 18L9 12L15 6" stroke="#00f0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <div class="statistics-wrapper" ref="statisticsWrapper">
        <div class="statistics-items" v-if="Object.keys(venueStatistics).length > 0">
          <div v-for="(stats, type) in venueStatistics" :key="type" class="statistics-item">
            <div class="type-name">
              {{ type }}统计
              <img :src="`/icon/${typeEnglish[type]}.png`">
            </div>
            <div class="counts">
              <span class="all-count">{{ stats.total }}</span>
              <span class="safe-count">
                <img :src="`/icon/${typeEnglish[type]}.png`">
                {{ stats.safe }}</span>
              <span class="unsafe-count">
                <img :src="`/icon/warn_${typeEnglish[type]}.png`">
                {{ stats.unsafe }}</span>
            </div>
          </div>
        </div>
        <div class="statistics-empty" v-else>
          <p>暂无统计数据</p>
        </div>
      </div>
      <button class="carousel-btn next-btn" @click="scrollCarousel(1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 18L15 12L9 6" stroke="#00f0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
  </div>
  <!-- 左侧搜索栏 -->
  <div class="search-panel">
    <h2>临平GIS图</h2>
    <input type="text" v-model="searchQuery" @input="filterVenues" placeholder="搜索店铺名称、地址、状态或派出所...">
    <button class="add-btn" @click="openAdd" v-if="user !== 'admin'">新增</button>
    <button class="reset-btn" @click="resetFilters">重置</button>
    
    <div class="filters">
      <div class="filter-item">
        <label>所属街道-社区:</label>
        <div class="custom-select" @click.stop>
          <div class="select-header" @click="toggleDropdown('street')">
            <span>{{ selectedStreet || '选择街道' }}</span>
            <span v-if="selectedCommunity && selectedCommunity !== ''"> / {{ selectedCommunity }}</span>
            <i class="arrow-icon" :class="{ 'open': isStreetDropdownOpen }">&#9660;</i>
          </div>
          <div class="select-options" v-if="isStreetDropdownOpen">
            <div v-for="area in policeAreaList" :key="area" class="police-area-group">
              <div class="police-area-header option-item" @click="expandedAreas[area] = !expandedAreas[area]">
                <span>{{ area }}</span>
                <i class="expand-icon" :class="{ 'expanded': expandedAreas[area] }">{{ expandedAreas[area] ? '−'
                  : '+' }}</i>
              </div>
              <div class="street-list" v-if="expandedAreas[area]">
                <div class="option-item sub-option" @click="handleStreetSelect('')"
                  :class="{ 'selected': selectedArea === area }">{{ area }}</div>
                <div v-for="street in streets" :key="street" class="street-group">
                  <div class="street-header option-item" @click="expandedStreets[street] = !expandedStreets[street]">
                    <span>{{ street }}</span>
                    <i class="expand-icon" :class="{ 'expanded': expandedStreets[street] }">{{ expandedStreets[street] ?
                      '−'
                      : '+' }}</i>
                  </div>
                  <div class="community-list" v-if="expandedStreets[street]">
                    <div class="option-item sub-option" @click="handleStreetSelect(street)"
                      :class="{ 'selected': selectedStreet === street && !selectedCommunity }">{{ street }}</div>
                    <div class="option-item sub-option" v-for="community in filteredCommunitiesByStreet(street)"
                      :key="community" @click="handleCommunitySelect(community)"
                      :class="{ 'selected': selectedStreet === street && selectedCommunity === community }">
                      {{ community }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="filter-item">
        <label>场所类型:</label>
        <div class="custom-select" @click.stop>
          <div class="select-header" @click="toggleDropdown('type')">
            <span>{{ selectedType ? (selectedTag ? `${selectedType} - ${selectedTag}` : selectedType) : '选择场所类型' }}</span>
            <i class="arrow-icon" :class="{ 'open': isTypeDropdownOpen }">&#9660;</i>
          </div>
          <div class="select-options" v-if="isTypeDropdownOpen">
            <div class="option-item" @click="handleTypeSelect('', '')">全部</div>
            <div v-for="type in venueTypes" :key="type" class="venue-type-group">
              <div class="venue-type-header option-item" @click="expandedTypes[type] = !expandedTypes[type]">
                <span>{{ type }}</span>
                <i class="expand-icon" :class="{ 'expanded': expandedTypes[type] }">{{ expandedTypes[type] ? '−' : '+' }}</i>
              </div>
              <div class="tag-list" v-if="expandedTypes[type]">
                <div class="option-item sub-option" @click="handleTypeSelect(type, '')" :class="{ 'selected': selectedType === type && !selectedTag }">{{ type }} (全部)</div>
                <div class="option-item sub-option" @click="handleTypeSelect(type, '是')" :class="{ 'selected': selectedType === type && selectedTag === '是' }">{{ type }} - 是</div>
                <div class="option-item sub-option" @click="handleTypeSelect(type, '否')" :class="{ 'selected': selectedType === type && selectedTag === '否' }">{{ type }} - 否</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="filter-item">
        <label>场所位置类型:</label>
        <div class="custom-select" @click.stop>
          <div class="select-header" @click="toggleDropdown('locationType')">
            <span>{{ selectedLocationType || '选择场所位置类型' }}</span>
            <i class="arrow-icon" :class="{ 'open': isLocationTypeDropdownOpen }">&#9660;</i>
          </div>
          <div class="select-options" v-if="isLocationTypeDropdownOpen">
            <div class="option-item" @click="handleLocationTypeSelect('')">全部</div>
            <div class="option-item" v-for="locationType in locationTypes" :key="locationType" @click="handleLocationTypeSelect(locationType)"
              :class="{ 'selected': selectedLocationType === locationType }">
              {{ locationType }}
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="filter-item">
        <label>预警发现:</label>
        <div class="custom-select" @click.stop>
          <div class="select-header" @click="toggleDropdown('checkAction')">
            <span>{{ selectedCheckAction || '选择动作' }}</span>
            <i class="arrow-icon" :class="{ 'open': isCheckActionDropdownOpen }">&#9660;</i>
          </div>
          <div class="select-options" v-if="isCheckActionDropdownOpen">
            <div class="option-item" @click="handleCheckActionSelect('')">全部</div>
            <div class="option-item" v-for="checkAction in checkActions" :key="checkAction"
              @click="handleCheckActionSelect(checkAction)"
              :class="{ 'selected': selectedCheckAction === checkAction }">{{ checkAction }}
            </div>
          </div>
        </div>
      </div> -->

      <!-- 店铺列表 -->
      <div class="venue-list-section" v-if="filteredVenues.length > 0 && (searchQuery || selectedStreet || selectedCommunity || selectedType || selectedStatus || selectedTag || isMarkerClicked || activeTimeFilter === 'month' || activeTimeFilter === 'week')">
        <!-- <div class="venue-list-header">
          <h3>店铺列表 ({{ filteredVenues.length }})</h3>
        </div> -->
        <div class="venue-list-items">
          <div class="venue-item" v-for="venue in filteredVenues" :key="venue.id" @click="locateVenue(venue)">
            <div class="venue-item-header">
              <div class="venue-title">
                <h4>{{ venue.store_name }}</h4>
              </div>
            </div>
            <div class="button-group">
              <button class="edit-btn" @click.stop="openEditor(venue)">编辑</button>
              <button class="edit-btn" @click.stop="openDetail(venue)">详情</button>
              <button class="delete-btn" @click.stop="openDeleteConfirm(venue)">删除</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- 新增对话框 -->
  <Add v-if="showAdd" :show-add="showAdd" :venue-types="venueTypes" :status-types="statusTypes" :streets="streets"
    :communities="filteredCommunities" :new-venue-id="newVenueId" @close="closeAdd" @save="saveNewVenue" />

  <!-- 编辑对话框 -->
  <Editor v-if="showEditor" :show-editor="showEditor" :current-venue="currentEditingVenue" :venue-reassured="venueReassured"
    :venue-types="venueTypes":status-types="statusTypes" :streets="streets" :communities="filteredCommunities" @close="closeEditor"
    @save="saveVenueChanges" />


  <!-- 详情弹窗 -->
  <Detail v-if="showDetail" :show-detail="showDetail" :current-venue="currentDetailVenue"
    :check-records="currentDetailVenue?.checkRecords || []" @close="closeDetail" />

  <!-- 删除确认弹窗 -->
  <div v-if="showDeleteConfirm" class="confirm-modal-overlay">
    <div class="confirm-modal">
      <div class="modal-header">
        <h3>确认删除</h3>
      </div>
      <div class="modal-body">
        <p>确定要删除店铺 "{{ currentVenueToDelete?.name }}" 吗？</p>
        <p class="text-warning">此操作不可撤销，删除后数据将永久丢失。</p>
      </div>
      <div class="modal-footer">
        <button class="cancel-btn" @click="cancelDelete">取消</button>
        <button class="confirm-btn" @click="confirmDelete">确认删除</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'

// 轮播图相关引用和变量
const statisticsWrapper = ref(null)
const scrollPosition = ref(0)
const itemWidth = 240 // 每个统计项的宽度，包括间距

// 滚动轮播图
const scrollCarousel = (direction) => {
  if (!statisticsWrapper.value) return

  // 计算每次滚动的距离（滚动3个项目）
  const scrollAmount = direction * itemWidth * 3
  const newPosition = scrollPosition.value + scrollAmount
  const maxScroll = statisticsWrapper.value.scrollWidth - statisticsWrapper.value.clientWidth

  // 限制滚动范围
  scrollPosition.value = Math.max(0, Math.min(newPosition, maxScroll))
  statisticsWrapper.value.scrollTo({
    left: scrollPosition.value,
    behavior: 'smooth'
  })
}

// 自动轮播
let carouselInterval = null
const startAutoCarousel = () => {
  if (carouselInterval) clearInterval(carouselInterval)
  carouselInterval = setInterval(() => {
    if (!statisticsWrapper.value) return
    const maxScroll = statisticsWrapper.value.scrollWidth - statisticsWrapper.value.clientWidth
    scrollPosition.value = (scrollPosition.value + itemWidth * 3) % (maxScroll + 1)
    statisticsWrapper.value.scrollTo({
      left: scrollPosition.value,
      behavior: 'smooth'
    })
  }, 5000) // 每5秒滚动一次
}

const stopAutoCarousel = () => {
  if (carouselInterval) {
    clearInterval(carouselInterval)
    carouselInterval = null
  }
}

// 关闭所有下拉框的函数
const closeAllDropdowns = () => {
  isStreetDropdownOpen.value = false
  isTypeDropdownOpen.value = false
  isLocationTypeDropdownOpen.value = false
}

// 重置所有筛选条件的函数
const resetFilters = () => {
  // 重置搜索框
  searchQuery.value = '';
  
  // 重置街道和社区选择
  selectedStreet.value = '';
  selectedCommunity.value = '';
  
  // 重置场所类型选择
  selectedType.value = '';
  selectedTag.value = '';
  
  // 重置场所位置类型选择
  selectedLocationType.value = '';
  
  // 重置检查动作选择
  selectedCheckAction.value = '';
  
  // 重置时间筛选
  activeTimeFilter.value = '';
  
  // 重置标记点击状态
  isMarkerClicked.value = false;
  
  // 关闭所有下拉框
  closeAllDropdowns();
  
  // 清除社区多边形
  if (communityPolygons.length > 0) {
    map.remove(communityPolygons);
    communityPolygons = [];
  }
  
  // 重新筛选
  filterVenues();
}

// 切换下拉框状态的函数
const toggleDropdown = (dropdownType) => {
  // 保存当前下拉框状态
  const currentState = {
    street: isStreetDropdownOpen.value,
    type: isTypeDropdownOpen.value,
    locationType: isLocationTypeDropdownOpen.value,
  }[dropdownType];

  // 关闭所有下拉框
  closeAllDropdowns();

  // 根据保存的状态切换当前下拉框
  if (!currentState) {
    switch (dropdownType) {
      case 'street':
        isStreetDropdownOpen.value = true;
        break;
      case 'type':
        isTypeDropdownOpen.value = true;
        break;
      case 'locationType':
        isLocationTypeDropdownOpen.value = true;
        break;
      case 'checkAction':
        isCheckActionDropdownOpen.value = true;
        break;
    }
  }
}
import Editor from '../components/Editor.vue'
import Add from '../components/Add.vue'
import Detail from '../components/Detail.vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import axios from 'axios';
import policeArea from '../data/policeArea.json';


const savedVenues = localStorage.getItem('venues');
const venues = ref(savedVenues ? JSON.parse(savedVenues) : []);
const user = ref(localStorage.getItem('user'));

import spa from '../assets/images/icon/spa.png'
import billiard from '../assets/images/icon/billiard.png'
import movie from '../assets/images/icon/movie.png'
import script from '../assets/images/icon/script.png'
import maid from '../assets/images/icon/maid.png'
import warnSpa from '../assets/images/icon/warn_spa.png'
import warnBilliard from '../assets/images/icon/warn_billiard.png'
import warnMovie from '../assets/images/icon/warn_movie.png'
import warnScript from '../assets/images/icon/warn_script.png'
import warnMaid from '../assets/images/icon/warn_maid.png'
import chess from '../assets/images/icon/chess.png'
import chessWarn from '../assets/images/icon/warn_chess.png'
import tuina from '../assets/images/icon/tuina.png'
import tuinaWarn from '../assets/images/icon/warn_tuina.png'
import spasheng from '../assets/images/icon/spasheng.png'
import spashengWarn from '../assets/images/icon/warn_spasheng.png'
import ear from '../assets/images/icon/ear.png'
import earWarn from '../assets/images/icon/warn_ear.png'
import yang from '../assets/images/icon/yang.png'
import yangWarn from '../assets/images/icon/warn_yang.png'
import shower from '../assets/images/icon/shower.png'
import showerWarn from '../assets/images/icon/warn_shower.png'
import physical from '../assets/images/icon/physical.png'
import physicalWarn from '../assets/images/icon/warn_physical.png'
import hair from '../assets/images/icon/hair.png'
import hairWarn from '../assets/images/icon/warn_hair.png'

const mapRef = ref(null)
const searchQuery = ref('')
const filteredVenues = ref([])
const isMarkerClicked = ref(false);
const selectedArea = ref('')
const selectedStreet = ref('')
const selectedCommunity = ref('')
const selectedType = ref('')
const selectedStatus = ref('')
const selectedTag = ref('')
const selectedCheckAction = ref('')
const selectedLocationType = ref('')


const isStreetDropdownOpen = ref(false)
const isTypeDropdownOpen = ref(false)
const isLocationTypeDropdownOpen = ref(false)
const isCheckActionDropdownOpen = ref(false)

const venueTypes = [
  '棋牌',
  '足浴',
  'SPA养生',
  '台球',
  '采耳',
  '养生馆',
  '洗浴',
  '盲人推拿',
  '私人影院',
  '中医理疗馆',
  '美容美发',
  '桌游店',
  '女仆店'
]
const venueReassured = [
  '是',
  '否',
  '未定义'
]

//提取唯一的区域
const policeAreaList = ['临平区']
// 提取所有唯一的街道
const streets = ref(
  // 提取所有唯一的街道
  [...new Set(policeArea.map(item => item.street))]
)
// 计算属性：根据选中的街道过滤社区
// 根据街道过滤社区的方法
const filteredCommunitiesByStreet = (street) => {
  if (!street) {
    return []
  }
  const communitiesForStreet = policeArea
    .filter(item => item.street === street)
    .map(item => item.community)
  return [...new Set(communitiesForStreet)]
}

// 计算属性：根据选中的街道过滤社区
const filteredCommunities = computed(() => {
  return filteredCommunitiesByStreet(selectedStreet.value)
})

//初始化展开的区域状态
const expandedAreas = ref({})
// 初始化展开的街道状态
const expandedStreets = ref({})
// 初始化展开的场所类型状态
const expandedTypes = ref({})
const locationTypes = ['纯商业楼内', '沿街店铺','楼宇内','纯小区住宅内','未定义']
const statusTypes = ['营业', '业态转变', '关停']
const tagTypes = ['放心', '否', '未定义']
const checkActions = ['排查已完成', '排查未完成']
const typeEnglish = {
  '棋牌': 'chess',
  'SPA养生': 'spasheng',
  '采耳': 'ear',
  '养生馆': 'yang',
  '洗浴': 'shower',
  '盲人推拿': 'tuina',
  '中医理疗馆': 'physical',
  '美容美发': 'hair',
  '足浴': 'spa',
  '女仆店': 'maid',
  '台球': 'billiard',
  '私人影院': 'movie',
  '桌游店': 'script'
};
// 计算本月新增和本周新增数量
const monthlyNewCount = computed(() => {
  const now = new Date();
  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
  return venues.value.filter(venue => new Date(venue.createdTime) >= monthStart).length;
});

const weeklyNewCount = computed(() => {
  const now = new Date();
  const weekStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
  return venues.value.filter(venue => new Date(venue.createdTime) >= weekStart).length;
});

const venueStatistics = computed(() => {
  const stats = {}
  venueTypes.forEach(type => {
    const typeVenues = venues.value.filter(v => v.type === type)
    const safe = typeVenues.filter(v => v.reassured === '是').length
    const unsafe = typeVenues.filter(v => v.reassured === '否').length
    const undefined = typeVenues.filter(v => v.reassured === '未定义').length
    stats[type] = {
      total: typeVenues.length,
      safe,
      unsafe,
      undefined
    }
  })
  return stats
})
let map = null
let markers = []

// 渲染标记点 - 使用MassMarks进行性能优化
let massMarks = null; // 存储海量点标记实例
const markersData = new Map(); // 存储每个标记点的数据，用于点击事件

// 存储社区多边形
let communityPolygons = [];

// 加载特定社区的KML数据
const loadCommunityKML = (communityName) => {
  // 确保地图已初始化
  if (!map) return;

  // 清除现有社区多边形
  if (communityPolygons.length > 0) {
    map.remove(communityPolygons);
    communityPolygons = [];
  }

  if (!communityName) return;

  fetch('/kml/临平社区.kml')
    .then(response => response.text())
    .then(xmlText => {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlText, "text/xml");
      const placemarks = xmlDoc.getElementsByTagName("Placemark");

      Array.from(placemarks).forEach(placemark => {
        const name = placemark.getElementsByTagName("name")[0]?.textContent;
        // 只加载选定的社区
        if (name === communityName) {
          const polygon = placemark.getElementsByTagName("Polygon")[0];
          if (polygon) {
            const coordinates = polygon.getElementsByTagName("coordinates")[0]?.textContent;
            if (coordinates) {
              // 解析坐标
              const path = coordinates.split(/\s+/).map(point => {
                const [lng, lat] = point.split(',').map(Number);
                return [lng, lat];
              });

              // 创建多边形
              const communityPolygon = new AMap.Polygon({
                path: path,
                strokeWeight: 2,
                strokeColor: "#0066CC",
                fillColor: "#E6F2FF",
                fillOpacity: 0.5
              });

              map.add(communityPolygon);
              communityPolygons.push(communityPolygon);

              // 添加点击事件显示社区名称
              communityPolygon.on('click', () => {
                new AMap.InfoWindow({
                  content: `<div style="padding:10px">${name}</div>`,
                  offset: new AMap.Pixel(0, -10)
                }).open(map, communityPolygon.getBounds().getCenter());
              });
            }
          }
        }
      });

      // 调整地图视野以显示所有多边形
      if (communityPolygons.length > 0) {
        map.setFitView(communityPolygons);
      }
      renderMarkers(filteredVenues.value);
    })
    .catch(error => {
      console.error("Error loading community KML file:", error);
      renderMarkers(filteredVenues.value); // 即使KML加载失败，仍渲染筛选后的标记点
    });
};

// 高德地图API密钥配置
// 初始化地图
const initMap = async () => {
  // 使用全局map变量
  window._AMapSecurityConfig = {
    securityJsCode: "f5d42d2216ec04a49b220d5c8e99c4b0",
  };
  console.log('开始加载高德地图API...')
  await AMapLoader.load({
    key: '929a9f72af558908aa7eed1abf94057b', // 请替换为您的API密钥
    version: '2.0',
    plugins: ['AMap.Marker', 'AMap.InfoWindow', 'AMap.DistrictSearch', 'AMap.MassMarks']
  })
    .then((AMap) => {
      map = new AMap.Map(mapRef.value, {
        zoom: 12,
        showIndoorMap: false,
        center: [120.231647, 30.428723] // 临平区中心点坐标
      });

      // 加载并解析KML文件
      fetch('/kml/临平街道.kml')
        .then(response => response.text())
        .then(xmlText => {
          const parser = new DOMParser();
          const xmlDoc = parser.parseFromString(xmlText, "text/xml");
          const placemarks = xmlDoc.getElementsByTagName("Placemark");

          Array.from(placemarks).forEach(placemark => {
            const name = placemark.getElementsByTagName("name")[0]?.textContent;
            const polygon = placemark.getElementsByTagName("Polygon")[0];
            if (polygon) {
              const coordinates = polygon.getElementsByTagName("coordinates")[0]?.textContent;
              if (coordinates) {
                // 解析坐标
                const path = coordinates.split(/\s+/).map(point => {
                  const [lng, lat] = point.split(',').map(Number);
                  return [lng, lat];
                });

                // 创建多边形
                const districtPolygon = new AMap.Polygon({
                  path: path,
                  strokeWeight: 2,
                  strokeColor: "#CC66CC",
                  fillColor: "#CCF3FF",
                  fillOpacity: 0.5
                });

                map.add(districtPolygon);

                // 添加点击事件显示区域名称
                districtPolygon.on('click', () => {
                  new AMap.InfoWindow({
                    content: `<div style="padding:10px">${name}</div>`,
                    offset: new AMap.Pixel(0, -10)
                  }).open(map, districtPolygon.getBounds().getCenter());
                });
              }
            }
          });

          // 调整地图视野以显示所有多边形
          map.setFitView();
          renderMarkers(venues.value);
        })
        .catch(error => {
          console.error("Error loading KML file:", error);
          renderMarkers(venues.value); // 即使KML加载失败，仍渲染标记点
        });

      // 注意：loadCommunityKML函数已在全局作用域定义
      // 此处不再重复定义
      console.log('地图初始化成功')
    })
    .catch((e) => {
      console.log(e);
    })
}

// 渲染标记点
const renderMarkers = (venuesToRender) => {
  // 清除现有标记
  if (markers.length > 0) {
    map.remove(markers)
    markers = []
  }

  const spaIcon = new AMap.Icon({
    image: spa,
  })
  const billiardIcon = new AMap.Icon({
    image: billiard,
  })
  const movieIcon = new AMap.Icon({
    image: movie,
  })
  const scriptIcon = new AMap.Icon({
    image: script,
  })
  const maidIcon = new AMap.Icon({
    image: maid,
  })

  const spaWarnIcon = new AMap.Icon({
    image: warnSpa,
  })
  const billiardWarnIcon = new AMap.Icon({
    image: warnBilliard,
  })
  const movieWarnIcon = new AMap.Icon({
    image: warnMovie,
  })
  const scriptWarnIcon = new AMap.Icon({
    image: warnScript,
  })
  const maidWarnIcon = new AMap.Icon({
    image: warnMaid,
  })
  const chessIcon = new AMap.Icon({
    image: chess,
  })
  const chessWarnIcon = new AMap.Icon({
    image: chessWarn,
  })
  const tuinaIcon = new AMap.Icon({
    image: tuina,
  })
  const tuinaWarnIcon = new AMap.Icon({
    image: tuinaWarn,
  })
  const spashengIcon = new AMap.Icon({
    image: spasheng,
  })
  const spashengWarnIcon = new AMap.Icon({
    image: spashengWarn,
  })
  const earIcon = new AMap.Icon({
    image: ear,
  })
  const earWarnIcon = new AMap.Icon({
    image: earWarn,
  })
  const yangIcon = new AMap.Icon({
    image: yang,
  })
  const yangWarnIcon = new AMap.Icon({
    image: yangWarn,
  })
  const showerIcon = new AMap.Icon({
    image: shower,
  })
  const showerWarnIcon = new AMap.Icon({
    image: showerWarn,
  })
  const physicalIcon = new AMap.Icon({
    image: physical,
  })
  const physicalWarnIcon = new AMap.Icon({
    image: physicalWarn,
  })
  const hairIcon = new AMap.Icon({
    image: hair,
  })
  const hairWarnIcon = new AMap.Icon({
    image: hairWarn,
  })



  const iconMap = {
    '足浴': spaIcon,
    '女仆店': maidIcon,
    '台球': billiardIcon,
    '私人影院': movieIcon,
    '桌游店': scriptIcon,
    '棋牌': chessIcon,
    'SPA养生': spashengIcon,
    '采耳': earIcon,
    '养生馆': yangIcon,
    '洗浴': showerIcon,
    '盲人推拿': tuinaIcon,
    '中医理疗馆': physicalIcon,
    '美容美发': hairIcon,
  }
  const warnIconMap = {
    '足浴': spaWarnIcon,
    '女仆店': maidWarnIcon,
    '台球': billiardWarnIcon,
    '私人影院': movieWarnIcon,
    '桌游店': scriptWarnIcon,
    '棋牌': chessWarnIcon,
    'SPA养生':spashengWarnIcon,
    '采耳': earWarnIcon,
    '养生馆': yangWarnIcon,
    '洗浴': showerWarnIcon,
    '盲人推拿': tuinaWarnIcon,
    '中医理疗馆': physicalWarnIcon,
    '美容美发': hairWarnIcon,
  }

  venuesToRender.forEach(venue => {
    const marker = new AMap.Marker({
      position: [venue.longitude, venue.latitude],
      offset: new AMap.Pixel(0, 0), // 设置点标记偏移量
      anchor: 'bottom-center',
      title: venue.store_name,
      icon: venue.reassured === '是' ? iconMap[venue.type] : warnIconMap[venue.type]
    })

    // 创建信息窗口
    const infoWindow = new AMap.InfoWindow({
      content: `
        <div style='padding:10px; background: rgba(15, 23, 42, 0.95); border-radius: 8px; border: 1px solid rgba(0, 240, 255, 0.3); color: #e2e8f0; box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);'>
          <h3 style='margin: 0 0 5px 0; font-size: 16px; color: #00f0ff; text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);'>${venue.store_name}</h3>
          <p style='margin: 3px 0; font-size: 12px;'>类型: ${venue.type}</p>
          <p style='margin: 3px 0; font-size: 12px;'>地址: ${venue.address}</p>
          <p style='margin: 3px 0; font-size: 12px;'>负责人姓名: <span style='display: inline-block; padding: 1px 6px; border-radius: 12px; font-size: 11px; background: rgba(0, 240, 255, 0.2); color: #00f0ff;'>${venue.charge_name}</span></p>
          <button class='detail-btn' style='margin-top: 8px; padding: 4px 12px; background: rgba(0, 240, 255, 0.2); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 6px; color: #00f0ff; font-size: 12px; cursor: pointer;' data-id='${venue.id}'>详情</button>
        </div>
      `,
      position: [venue.longitude, venue.latitude],
      // size: new AMap.Size(250, 80),
      offset: new AMap.Pixel(0, -30) // 向上偏移50px，确保弹窗在标记点正上方
    })

    // 为信息窗口添加详情按钮点击事件委托
    infoWindow.on('open', function() {
      setTimeout(() => {
        const detailBtn = document.querySelector(`.detail-btn[data-id="${venue.id}"]`);
        if (detailBtn) {
          detailBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            openDetail(venue);
          });
        }
      }, 0);
    })

    marker.on('click', () => {
      infoWindow.open(map, marker.getPosition())
    })

    // 存储 venueId 和 infoWindow 引用
    marker.venueId = venue.id;
    marker.infoWindow = infoWindow;

    markers.push(marker)
  })

  map.add(markers)
}

// 搜索和筛选
const handleStreetSelect = (street) => {
  selectedArea.value = ''
  selectedStreet.value = street
  selectedCommunity.value = '' // 重置社区选择
  isStreetDropdownOpen.value = false
  // 定位到选中的街道
  if (!street) {
    map.setFitView();
    communityPolygons.forEach(polygon => {
      map.remove(polygon);
    });
    renderMarkers(venues.value);
    return;
  }
  locateStreet(street);
  filterVenues()
}

// 定位街道函数
const locateStreet = (street) => {
  if (!map || !street) return;

  // 清除现有社区多边形
  if (communityPolygons.length > 0) {
    map.remove(communityPolygons);
    communityPolygons = [];
  }

  // 尝试加载街道KML文件
  fetch(`/kml/临平街道.kml`)
    .then(response => {
      if (!response.ok) throw new Error('KML文件不存在');
      return response.text();
    })
    .then(xmlText => {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlText, "text/xml");
      const placemarks = xmlDoc.getElementsByTagName("Placemark");

      Array.from(placemarks).forEach(placemark => {
        const name = placemark.getElementsByTagName("name")[0]?.textContent;
        if (name === street) {
          const polygon = placemark.getElementsByTagName("Polygon")[0];
          if (polygon) {
            const coordinates = polygon.getElementsByTagName("coordinates")[0]?.textContent;
            if (coordinates) {
              const path = coordinates.split(/\s+/).map(point => {
                const [lng, lat] = point.split(',').map(Number);
                return [lng, lat];
              });

              const streetPolygon = new AMap.Polygon({
                path: path,
                strokeWeight: 2,
                strokeColor: "#0066CC",
                fillColor: "#E6F2FF",
                fillOpacity: 0.5
              });

              map.add(streetPolygon);
              communityPolygons.push(streetPolygon);

              streetPolygon.on('click', () => {
                new AMap.InfoWindow({
                  content: `<div style="padding:10px">${name}</div>`,
                  offset: new AMap.Pixel(0, -10)
                }).open(map, streetPolygon.getBounds().getCenter());
              });
            }
          }
        }
      });

      if (communityPolygons.length > 0) {
        map.setFitView(communityPolygons);
      }
    })
    .catch(error => {
      console.error(`加载街道KML失败: ${error.message}`);
      renderMarkers(venues.value);
    });
}

const handleCommunitySelect = (community) => {
  selectedCommunity.value = community
  isStreetDropdownOpen.value = false
  // 加载选定社区的KML数据
  loadCommunityKML(community);
  filterVenues()
}

const handleTypeSelect = (type, tag) => {
  selectedType.value = type
  selectedTag.value = tag
  isTypeDropdownOpen.value = false
  filterVenues()
}

const handleLocationTypeSelect = (locationType) => {
  selectedLocationType.value = locationType
  isLocationTypeDropdownOpen.value = false
  filterVenues()
}

const handleCheckActionSelect = (checkAction) => {
  selectedCheckAction.value = checkAction
  isCheckActionDropdownOpen.value = false
  filterVenues()
}

// 时间过滤状态
const activeTimeFilter = ref('');

const filterByMonth = () => {
  activeTimeFilter.value = 'month';
  filterVenues();
};

const filterByWeek = () => {
  activeTimeFilter.value = 'week';
  filterVenues();
};

const clearTimeFilter = () => {
  activeTimeFilter.value = 'all';
  filterVenues();
};

const filterVenues = () => {
  // 从原始数据开始
  let result = [...venues.value];

  // 应用时间过滤
  if (activeTimeFilter.value === 'month') {
    const monthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
    result = result.filter(venue => new Date(venue.createdTime) >= monthStart);
  } else if (activeTimeFilter.value === 'week') {
    const weekStart = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
    result = result.filter(venue => new Date(venue.createdTime) >= weekStart);
  } else if (activeTimeFilter.value === 'all') {
    result = result;
  }

  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(venue =>
      venue.store_name.toLowerCase().includes(query)
    );
  }

  // 按街道和社区筛选 - 链式组合
  if (selectedStreet.value) {
    result = result.filter(venue => venue.policeStation === selectedStreet.value);
  }
  
  // 当选择了街道和社区时的筛选
  if (selectedCommunity.value && selectedStreet.value) {
    result = result.filter(venue => venue.community === selectedCommunity.value);
  }
  
  // 当只选择社区时的筛选
  if (selectedCommunity.value && !selectedStreet.value) {
    result = result.filter(venue => venue.community === selectedCommunity.value);
  }

  // 按场所类型筛选 - 链式组合
  if (selectedType.value) {
    result = result.filter(venue => venue.type === selectedType.value);
  }
  
  // 按放心场所标签筛选 - 链式组合
  if (selectedTag.value) {
    result = result.filter(venue => venue.reassured === selectedTag.value);
  }
  
  // 按场所位置类型筛选 - 链式组合
  if (selectedLocationType.value) {
    result = result.filter(venue => venue.location_type === selectedLocationType.value);
  }

  // 按审核状态筛选 - 链式组合
  if (selectedCheckAction.value) {
    result = result.filter(venue => venue.checkAction === selectedCheckAction.value);
  }

  // 更新筛选结果并渲染标记
  filteredVenues.value = result;
  renderMarkers(result);
}


onMounted(async () => {
    await initMap();
    try {
      const response = await axios.get('mysql/stores');
      venues.value = response.data;
      localStorage.setItem('venues', JSON.stringify(venues.value));
    } catch (error) {
      console.error('Error fetching venues from API:', error);
      const savedVenues = localStorage.getItem('venues');
      if (savedVenues) {
        venues.value = JSON.parse(savedVenues);
      }
    }
  filterVenues();

  // 初始化轮播
  nextTick(() => {
    if (statisticsWrapper.value) {
      startAutoCarousel()
      // 监听鼠标进入和离开事件
      statisticsWrapper.value.addEventListener('mouseenter', stopAutoCarousel)
      statisticsWrapper.value.addEventListener('mouseleave', startAutoCarousel)
    }
  })
})

// 编辑功能相关状态
const showEditor = ref(false)
const currentEditingVenue = ref(null)

// 新增功能相关状态
const showAdd = ref(false)
const newVenueId = ref('')

// 编辑功能方法
const openEditor = (venue) => {
  currentEditingVenue.value = { ...venue }
  showEditor.value = true
}

const closeEditor = () => {
  showEditor.value = false
  currentEditingVenue.value = null
}

const openAdd = () => {
  // 生成新ID
  const maxId = Math.max(...venues.value.map(v => parseInt(v.id)));
  newVenueId.value = (maxId + 1).toString();
  showAdd.value = true
}

const closeAdd = () => {
  showAdd.value = false
}

const saveNewVenue = async (newVenue) => {
  try {
    const response = await axios.post('mysql/stores', newVenue);
    venues.value.push(response.data);
    localStorage.setItem('venues', JSON.stringify(venues.value));
    filterVenues();
    renderMarkers(filteredVenues.value);
    closeAdd();
  } catch (error) {
    console.error('Error saving new venue:', error);
  }
}

const saveVenueChanges = async (updatedVenue) => {
  // 找到并更新 venues 数组中的对应项
  const index = venues.value.findIndex(v => v.id === updatedVenue.id)
  try {
      console.log(updatedVenue);
      // 将photoName数组转换为逗号分隔字符串
      if (Array.isArray(updatedVenue.photoName)) {
        updatedVenue.photoName = updatedVenue.photoName.join(',');
      }
      await axios.put(`/mysql/stores/${updatedVenue.id}`, updatedVenue);
      venues.value[index] = updatedVenue
      console.log(venues.value[index]);
      localStorage.setItem('venues', JSON.stringify(venues.value));
      filterVenues()
      renderMarkers(filteredVenues.value)
      closeEditor();
    } catch (error) {
      console.error('Error updating venue:', error);
    }
  closeEditor()
}

// 删除确认弹窗状态
const showDeleteConfirm = ref(false)
const currentVenueToDelete = ref(null)

// 详情弹窗状态
const showDetail = ref(false)
const currentDetailVenue = ref(null)


const openDeleteConfirm = (venue) => {
  currentVenueToDelete.value = venue
  showDeleteConfirm.value = true
}

const confirmDelete = async () => {
  if (currentVenueToDelete.value) {
    const index = venues.value.findIndex(v => v.id === currentVenueToDelete.value.id);
    try {
      await axios.delete(`/mysql/stores/${currentVenueToDelete.value.id}`);
      if (index !== -1) {
        venues.value.splice(index, 1);
        localStorage.setItem('venues', JSON.stringify(venues.value));
        filterVenues();
        renderMarkers(filteredVenues.value);
      }
      showDeleteConfirm.value = false;
      currentVenueToDelete.value = null;
    } catch (error) {
      console.error('Error deleting venue:', error);
    }
    showDeleteConfirm.value = false
    currentVenueToDelete.value = null
  }
}

// 详情弹窗方法
const openDetail = (venue) => {
  currentDetailVenue.value = venue
  showDetail.value = true
}

const closeDetail = () => {
  showDetail.value = false
  currentDetailVenue.value = null
}

const cancelDelete = () => {
  showDeleteConfirm.value = false
  currentVenueToDelete.value = null
}

// 定位到店铺标记点并打开信息窗口
const locateVenue = (venue) => {
  const marker = markers.find(m => m.venueId === venue.id);
  if (marker) {
    // 定位到标记点
    // 使用平滑移动将标记点置于屏幕中心
    const position = [marker.getPosition().lng, marker.getPosition().lat];
    console.log(position);
    map.panTo(position);
    // map.setZoom(13); // 调整缩放级别以便清晰查看
    // 打开信息窗口
    marker.infoWindow.open(map, marker.getPosition());
  }
}
</script>

<style scoped>
.new-stats-container {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.2);
  z-index: 1000;
  background-image: radial-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.stat-item {
  text-align: center;
  min-width: 100px;
}

.stat-label {
  font-size: 14px;
  color: #00f0ff;
  display: block;
  text-shadow: 0 0 3px rgba(0, 240, 255, 0.5);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #e2e8f0;
  cursor: pointer;
  display: block;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.stat-value:hover {
  color: #00f0ff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
  transform: translateY(-1px);
}

.map-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

/*场所统计面板 - 科技感暗色主题优化*/
.statistics-container {
  position: fixed;
  bottom: 0px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 12px 12px 0 0;
  padding: 16px;
  z-index: 1000;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.4);
  width: 100%;
  /* 科技感网格背景 */
  background-image: radial-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.carousel-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.5);
  color: #00f0ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.statistics-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 0;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.statistics-wrapper::-webkit-scrollbar {
  display: none;
}

.statistics-items {
  display: flex;
  gap: 15px;
  padding: 0 40px;
  width: max-content;
}

.statistics-title {
  margin: 0 0 12px 0;
  color: #00f0ff;
  font-size: 16px;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
}

.statistics-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.15);
  transition: all 0.3s ease;
}

.statistics-item:hover {
  background: rgba(30, 41, 59, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);
  border-color: rgba(0, 240, 255, 0.4);
}

.type-name {
  color: #00f0ff;
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 400;
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
}

/* .type-name img {
  width: 20px;
  height: 20px;
  margin-right: 6px;
} */

.counts {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding-top: 5px;
  border-top: 1px dashed rgba(0, 240, 255, 0.15);
}

.all-count {
  color: #e2e8f0;
  font-weight: 500;
}

.all-count::before {
  content: '总:';
  margin-right: 4px;
  color: #94a3b8;
}

.safe-count {
  color: #4ade80;
  display: flex;
  align-items: center;
}

.safe-count::before {
  content: '放心:';
  margin-right: 4px;
}

.unsafe-count {
  color: #f87171;
  display: flex;
  align-items: center;
}

.unsafe-count::before {
  content: '不放心:';
  margin-right: 4px;
}

.statistics-empty {
  color: #e2e8f0;
  text-align: center;
  padding: 30px 10px;
  font-size: 14px;
}

/* 滚动条优化 */
.statistics-container::-webkit-scrollbar {
  width: 6px;
}

.statistics-container::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
}

.statistics-container::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.5);
  border-radius: 10px;
}

.statistics-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.8);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .statistics-container {
    min-width: auto;
    width: calc(100% - 40px);
    max-height: 35vh;
  }
}

.search-panel {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.2);
  z-index: 100;
  width: 280px;
  color: #e2e8f0;
}

.advanced-filter-btn {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
  background: rgba(0, 240, 255, 0.2);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.advanced-filter-btn:hover {
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.search-panel input {
  width: 100%;
  padding: 8px;
  margin: 10px 0 20px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  box-sizing: border-box;
  font-size: 14px;
  height: 36px;
}

/* 科技感网格背景 */
.search-panel,
.venue-list-panel {
  background-image: radial-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.panel-header h3 {
  margin: 0;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.search-panel h2 {
  margin: 0 0 15px 0;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
  font-size: 18px;
}

.filter-item label {
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
  color: #00f0ff;
  text-shadow: 0 0 3px rgba(0, 240, 255, 0.5);
}

/* 左侧搜索栏中的店铺列表样式 */
.venue-list-section {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 240, 255, 0.3);
  padding-top: 15px;
}

.venue-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.venue-list-items {
  max-height: 300px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.15);
}

.venue-list-items::-webkit-scrollbar {
  width: 6px;
}

.venue-list-items::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 3px;
}

.venue-list-items::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 3px;
}

.venue-list-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.5);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.toggle-btn {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 12px;
  color: #00f0ff;
  transition: all 0.3s ease;
  width: 70px;
  text-align: center;
}

.toggle-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

/* 科技感背景渐变 */
body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  margin: 0;
  padding: 0;
}

/* 选择框选项样式 */
.filter-item select option {
  background-color: #1e293b;
  color: #e2e8f0;
}

/* 自定义下拉选择器样式 */
.custom-select {
  position: relative;
  width: 100%;
  margin-top: 5px;
}

.select-header {
  padding: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  font-size: 14px;
}

.select-header:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.arrow-icon {
  transition: transform 0.3s ease;
  font-size: 12px;
}

.arrow-icon.open {
  transform: rotate(180deg);
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 0 0 6px 6px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 10;
  margin-top: -1px;
  box-shadow: 0 5px 15px rgba(0, 240, 255, 0.15);
  padding: 5px 0;
}

/* 下拉框样式优化 */
.street-group {
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.police-area-header, .street-header, .venue-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.police-area-header:hover, .street-header:hover, .venue-type-header:hover {
  background: rgba(0, 240, 255, 0.1);
}
.street-list, .community-list, .tag-list {
  padding-left: 15px;
  border-left: 2px solid rgba(0, 240, 255, 0.3);
  margin-left: 10px;
}

.sub-option {
  padding-left: 20px;
  font-size: 14px;
  color: #e2e8f0;
}

.option-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: white;
}

.option-item:hover {
  background: rgba(0, 240, 255, 0.2);
}

.option-item.selected {
  background: rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  font-weight: 500;
}

.expand-icon {
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

/* 进一步优化下拉框样式 */
.select-header {
  background: rgba(15, 23, 42, 0.8);
  border-radius: 4px;
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.select-header:hover {
  background: rgba(15, 23, 42, 0.9);
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.arrow-icon.open {
  transform: rotate(180deg);
}

.police-area-header .street-header .expand-icon {
  color: #00f0ff;
}

.sub-option:hover {
  background: rgba(0, 240, 255, 0.15);
}

.secondary-select .select-options {
  max-height: 300px;
  overflow-y: auto;
}

.secondary-indent {
  padding-left: 20px;
}

.secondary-options {
  padding-left: 0;
}

/* 二级下拉框样式 */
.sub-options {
  position: absolute;
  left: 100%;
  top: 0;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 20;
  width: 100%;
  box-shadow: 0 5px 15px rgba(0, 240, 255, 0.15);
  margin-left: 5px;
}

.sub-options .option-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 14px;
  color: white;
  position: relative;
}

.sub-options .option-item:hover {
  background: rgba(0, 240, 255, 0.2);
}

.sub-options .option-item.selected {
  background: rgba(0, 240, 255, 0.3);
  font-weight: bold;
}

.suboffice-group {
  border-top: 1px solid rgba(0, 240, 255, 0.1);
}

.suboffice-header {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.5);
  color: white;
}

.expand-icon {
  font-size: 12px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stations-list {
  padding-left: 15px;
}

.station-item {
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: white;
}

.station-item:hover {
  background: rgba(0, 240, 255, 0.2);
  padding-left: 15px;
}

.station-item.selected {
  background: rgba(0, 240, 255, 0.3);
  font-weight: bold;
}

/* 自定义滚动条 */
.select-options::-webkit-scrollbar {
  width: 6px;
}

.select-options::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
}

.select-options::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 10px;
}

.select-options::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.5);
}

/* 卡片悬停动画 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
  }

  50% {
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.3);
  }

  100% {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
  }
}

.venue-item:hover {
  animation: pulse 2s infinite;
}

.venue-item {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.venue-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.venue-item:hover::before {
  left: 100%;
}

.venue-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.venue-item h4 {
  margin: 0;
  color: #00f0ff;
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
}

.venue-item p {
  margin: 4px 0;
  font-size: 13px;
  color: #e2e8f0;
}

.venue-item .status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 8px;
  background: rgba(0, 240, 255, 0.2);
  color: #00f0ff;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.filter-item select {
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
  margin-top: 5px;
  transition: all 0.3s ease;
}

.filter-item select:focus {
  outline: none;
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* 自定义滚动条 */
.venue-list-panel::-webkit-scrollbar {
  width: 6px;
}

.venue-list-panel::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
}

.venue-list-panel::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 10px;
}

.venue-list-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.5);
}

.venue-list-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  width: 300px;
  max-height: calc(83vh - 60px);
  overflow-y: auto;
  transition: width 0.3s ease;
}

.venue-list-panel.collapsed {
  width: 150px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.toggle-btn {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.venue-list-panel.collapsed .venue-item {
  display: none;
}

.venue-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.venue-item h4 {
  margin: 0 0 5px;
  color: #00f0ff;
}

.venue-item p {
  margin: 3px 0;
  font-size: 0.9em;
  color: #00f0ff;
}

.venue-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  width: 100%;
}

.venue-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.button-group {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.button-group-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

.edit-btn {
  background: rgba(0, 240, 255, 0.2);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #00f0ff;
  transition: all 0.3s ease;
  width: 50px;
  text-align: center;
}

.edit-btn:hover {
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.delete-btn {
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #ff4d4f;
  transition: all 0.3s ease;
  width: 50px;
  text-align: center;
}

.delete-btn:hover {
  background: rgba(255, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

.add-btn {
  background: rgba(0, 255, 127, 0.2);
  border: 1px solid rgba(0, 255, 127, 0.3);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  color: #00ff7f;
  transition: all 0.3s ease;
  width: 70px;
  text-align: center;
}

.add-btn:hover {
  background: rgba(0, 255, 127, 0.3);
  box-shadow: 0 0 8px rgba(0, 255, 127, 0.4);
}

.reset-btn {
  background: rgba(0, 191, 255, 0.2);
  border: 1px solid rgba(0, 191, 255, 0.3);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  color: #00bfff;
  transition: all 0.3s ease;
  width: 70px;
  text-align: center;
}

.reset-btn:hover {
  background: rgba(0, 191, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
}

/* 确认弹窗样式 */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.confirm-modal {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  width: 350px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  background-image: radial-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.modal-header {
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.modal-header h3 {
  margin: 0;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.modal-body {
  margin-bottom: 20px;
  color: #e2e8f0;
}

.text-warning {
  color: #ff4d4f;
  font-size: 13px;
  margin-top: 8px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #00f0ff;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.confirm-btn {
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #ff4d4f;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  background: rgba(255, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}

/* .preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preview-modal {
  background: #1e293b;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
}

.preview-modal .modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-modal .modal-header h3 {
  margin: 0;
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.preview-modal .close-btn {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
}

.preview-modal .close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #00f0ff;
}

.preview-container {
  flex: 1;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
} */

.carousel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(0, 240, 255, 0.5);
  color: #00f0ff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
  transition: all 0.3s;
}

.carousel-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.carousel-image-container {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.5);
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
}

.carousel-indicators {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.indicator.active {
  background: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
  transform: scale(1.2);
}

.no-images {
  color: #e2e8f0;
  text-align: center;
  padding: 40px 20px;
}
</style>
